<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .header{
            height: 66px;
            /*background:tomato;*/
            border-bottom:1px solid whitesmoke;
            margin-bottom: 25px;

        }
       
        .banner{
            width: 1207px;
            height: 512px;
            background:whitesmoke;
            margin-right:auto;
            
            
            margin-left: auto;
        }
        .menu{
            width: 1207px;
            height: 36px;
            background:white;
            margin:0px auto; 
        }
        .list{
            width: 1207px;
            height: 1000px;
            background:whitesmoke;
            margin:25px auto 12px; 
        }
        .txt{
            width: 1207px;
            height: 35px;
            background:white;
            text-align: center;
            line-height: 35px;
            margin:12px auto 0px;
        }

        .header .left{
            float: left;
            margin-top: 26px;
            margin-left: 35px;


        }

        .header ul{

            float: left;
            margin-top: 15px;
            margin-left: 257px;
            margin-bottom: 17px;
            
        }
        .header .right{

            float: right;
            margin-top: 17px;
            margin-bottom: 27px;

        }
        .header li{
            float: left;
            
            
            background: #f8e71c;
            border-radius: 94px;
            text-align: center;
            line-height: 21px;
           
            padding: 8px;
            width: 21px;
            height: 21px;
            margin-right: 12px;

            
           
            

        }
        .banner .left{

            float: left;
            width: 909px;

        }
        .banner .left p{
            position: absolute;
            
            
            background: rgba(0,0,0,0.3);
            width: 289px;
            height: 30px;
            line-height: 30px;
            bottom: 0px;
            float: left;
           

        }

        .banner .right{

            float: right;
            width: 289px;
        }
        .banner .right li{

            width: 289px;
            height: 163px;
            margin-bottom: 12px;

            overflow: hidden;
            position: relative;

        }
        .banner .right img{
            width: 289px;
        }
        .banner .right p{
            position: absolute;
            left: 0px;
            bottom: 0px;
            background: rgba(0,0,0,0.3);
            width: 289px;
            height: 30px;
            line-height: 30px;
        }
        .dakuang{

            background:#f5f5f5;
            height: 538px;
            
        }
        .menu .zuo{

            width: 131px;
            height: 35px;
            border: 1px solid black;
            float: left;
            
            
        }
        .menu .zuo p{

            margin-left: 13px;
            margin-top: 6px;
            margin-bottom: 10px;
        }
        .menu .zhongone{

            width: 131px;
            height: 35px;
            border: 1px solid black;
            float: left;
            margin-left: 16px;
            

        }
        .menu .zhongone p{

            margin-left: 13px;
            margin-top: 6px;
            margin-bottom: 10px;
        }
        .menu .zhongtwo{

            width: 131px;
            height: 35px;
            border: 1px solid black;
            float: left;
            margin-left: 16px;
            

        }
        .menu .zhongtwo p{

            margin-left: 13px;
            margin-top: 6px;
            margin-bottom: 10px;
        }
        .menu .you{

            width: 131px;
            height: 35px;
            border: 1px solid black;
            float: left;
            margin-left: 16px;
            
        }
        .menu .you p{

            margin-left: 13px;
            margin-top: 6px;
            margin-bottom: 10px;
        }
        .list li{
            width: 291px;
            height: 311px;
            border-bottom: 1px solid white;
            background:white;
            float:left;
            margin-right: 14px;


        }
        .list li:nth-of-type(4n){

            margin-right: 0px;
        }
        .list p{

            margin: 12px 15px;
        }

        .list img{
            width: 291px;

        }
        .list p:nth-of-type(1){


            height: 42px;
        }
        .list span:nth-of-type(1){

            float: left;
        }
        .list span:nth-of-type(2){

            float: right;
            margin-left: 121px;

        }

        .list span:nth-of-type(3){

            float: right;

        }

        /*.list .top{
        
         margin-left: auto;
         margin-right: auto;
         float: top;
         
         
         }
        .list .top .q{

            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            

        }
        .list .top .w{

        height: 195px;
        width: 292px;
        float: left;
        margin-right: 13px;
  

        }
        .list .top .e{

        height: 195px;
        width: 292px;
        float: left;
        margin-right: 13px;
        


        }
        .list .top .r{

        height: 195px;
        width: 292px;
        float: left;
      
        


        }
        .list .zhong{
        
        margin-left: auto;
        margin-right: auto;
        float: top;
        
        
        }
        .list .zhong .a{
            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            margin-top: 133px;
        }
        .list .zhong .s{
            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            margin-top: 133px;
        }
        .list .zhong .d{
            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            margin-top: 133px;
        }
        .list .zhong .f{
            height: 195px;
            width: 292px;
            float: left;
            margin-top: 133px;
            
        }
        .list .bot{
        
        margin-left: auto;
        margin-right: auto;
        float: top;
        
        }
        .list .bot .z{
            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            margin-top: 133px;
        }
        .list .bot .x{
            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            margin-top: 133px;
        }
        .list .bot .c{
            height: 195px;
            width: 292px;
            float: left;
            margin-right: 13px;
            margin-top: 133px;
        }   
        .list .bot .v{
            height: 195px;
            width: 292px;
            float: left;
            
            margin-top: 133px;
        }*/
        .xia{
            height: 234px;
            width: 1207px;
            margin-top: 72px;
            margin-left: auto;
            margin-right: auto;
            /*background: tomato;*/

            } 
        
        .xia .aa{
            margin-bottom: 61px;
        }
        .xia ul{

            height: 59px;
            width: 1207px;
        }
        .xia .hongxing{

            float: left;
            margin-right: 25px;
        }
        .xia .if{

            float: left;
            margin-right: 25px;
            
            }
        .xia .tengxun{

            float: left;
            margin-right: 25px;
            }
        .xia .er{

            float: left;
            margin-right: 25px;
            }
        .xia .pq{

            float: left;
            margin-right: 25px;
            }
        .xia .jingdong{

            float: left;
            margin-right: 25px;
            }
        .xia .youhao{

            float: left;
            margin-right: 25px;
            }
        .xia .bb{

            margin-top: 37px;
        }
        .xia .xiaxia{
            margin-top: 20px;
            height: 12px;
            width: 1207px;
            float: left;
            font-size: 2px;
            
        }
        .xia .xiaxia .a1{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a2{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a3{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a4{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a5{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a6{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a7{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a8{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a9{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        .xia .xiaxia .a10{
            float: left;
            font-size: 2px;
            margin-right: 27px;
        }

        /*.list .top .ww{
            height: 133px;
            width: 1207px;
            
            }
        .list .top .ww .a1{
            float: left;
            font-size: 5px;

        
        }

        .list .top .ww.a2{
        
            float: left;
            font-size: 5px;
        
        }

        .list .top .ww.a3{
            float: left;
            font-size: 5px;
        }

        .list .top .ww .a4{
            float: left;
            font-size: 5px;
        
        }*/

        



    



       
        
        
    </style>
</head>
<body>




    <div class="header">
        <span class="left">三</span>
        <ul>
           <li>赞</li>
            <li>萌</li>
            <li>哈</li>
            <li>艹</li>
           <li>买</li>
        </ul>
        <span class="right">登录</span>
    </div>








    <div class="dakuang">
    <div class="banner">
        <img src="s003.jpg" alt="" class="left" >
        <ul class="right">

            <li>
                <img src="s02.jpg" alt="">
                <p>想点亮圣诞气氛，试试这个[驯鹿]灯</p>
            </li>
            <li>
                <img src="s03.jpg" alt="">
                <p>Designer 100:100个设计师，100个故事</p>
            </li>
            <li>
                <img src="s04.jpg" alt="">
                <p>旧椅子获新生，还比以前更炫酷了</p>
            </li>
        </ul>
    </div>
</div>








    <ul class="menu">
        <div class="zuo"><p>最新</p></div>
        <div class="zhongone"><p>最热</p></div>
        <div class="zhongtwo"><p>热议</p></div>
        <div class="you"><p>随机</p></div>
    </ul>









    <ul class="list">
        <li><img src="i01.jpg" alt=""> <p>用水才能擦去笔迹，它只想保护好设计师的创意</p> <span>2小时前</span> <span>2</span> <span>122</span></li>
        <li><img src="i02.jpg" alt=""> <p>马桶刷也要有优雅的姿态</p> <span>3小时前</span> <span>7</span> <span>108</span></li>
        <li><img src="i03.jpg" alt=""> <p>健身也走[科技范]，你以为仅仅只是个瑜伽垫？</p> <span>16小时前</span> <span>11</span> <span>407</span></li>
        <li><img src="i04.jpg" alt=""> <p>牙缝清洁怎么办？牙签牙线都过时了，用[刷子]刷吧</p> <span>16小时前</span> <span>16</span> <span>640</span></li>
        <li><img src="i05.jpg" alt=""> <p>矮怎么了？照样能够拿到书架顶端的书</p> <span>18小时前</span> <span>24</span> <span>534</span></li>
        <li><img src="i06.png" alt=""> <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业......</p> <span>19小时前</span> <span>23</span> <span>1064</span></li>
        <li><img src="i07.jpg" alt=""> <p>中国国际设计节PK世界工业设计大会，哪个会更棒？</p> <span>20小时前</span> <span>10</span> <span>402</span></li>
        <li><img src="i07.png" alt=""> <p>首届世界工业设计大会在家门口杭州，中国设计师们燥起来</p> <span>23小时前</span> <span>9</span> <span>303</span></li>
        <li><img src="i08.jpg" alt=""> <p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p> <span>1天前</span> <span>11</span> <span>479</span></li>
        <li><img src="i09.jpg" alt=""> <p>废纸打造的铅笔，像是一朵朵落入凡间的话</p> <span>2天前</span> <span>34</span> <span>533</span></li>
        <li><img src="i10.jpg" alt=""> <p>倚靠在毯子上，这件事听着就让人舒坦</p> <span>2天前</span> <span>19</span> <span>463</span></li>
        <li><img src="i11.jpg" alt=""> <p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就能变</p> <span>2天前</span> <span>44</span> <span>540</span></li>
    </ul>
        








    <p class="txt">太快了吧，慢慢来，😀</p>







    <div class="xia">


        <p class="aa">合作伙伴</p>
        <ul>
            <li><img src="x01.png" alt="" class="hongxing"></li>
            <li><img src="x02.png" alt="" class="if"></li>
            <li><img src="x03.png" alt="" class="tengxun"></li>
            <li><img src="x04.png" alt="" class="er"></li>
            <li><img src="x05.png" alt="" class="pq"></li>
            <li><img src="x06.png" alt="" class="jingdong"></li>
            <li><img src="x07.jpg" alt="" class="youhao"></li>
        </ul>
        <p class="bb">友情链接</p>
        <ul class="xiaxia">
            <li><p class="a1">DRC北京工业设计创意产业基地</p></li>
            <li><p class="a2">中国工业设计协会</p></li>
            <li><p class="a3">设计邦</p></li>
            <li><p class="a4">网易家居</p></li>
            <li><p class="a5">凤凰家居</p></li>
            <li><p class="a6">智东西</p></li>
            <li><p class="a7">壹网空间</p></li>
            <li><p class="a8">七牛云存储</p></li>
            <li><p class="a9">高清图片</p></li>
            <li><p class="a10">Fotor</p></li>

        </ul>
        
    </div>

</body>
</html>